import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Table } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import { getStoreTypeList } from '@/services/supplier/category/storeType'

const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: 'center'
    },
    {
        title: '分类图标',
        dataIndex: 'icon',
        key: 'icon',
        align: 'center'
    },
    {
        title: '分类名称',
        dataIndex: 'name',
        key: 'name',
        align: 'center'
    },
    {
        title: '排序',
        dataIndex: 'sort',
        key: 'sort',
        align: 'center'
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        align: 'center'
    },
    {
        title: '操作',
        dataIndex: 'handle',
        key: 'handle',
        align: 'center'
    }
]

const StoreType = props => {
    const { form } = props
    const { getFieldDecorator } = form
    const [typeList, setTypeList] = useState([])
    const [pageNo, setPageNo] = useState(1)
    const [pageSize, setpageSize] = useState(10)
    const [total, setTotal] = useState(1)

    useEffect(() => {
        init()
    }, [])

    const init = async () => {
        await getStoreTypeLists()
    }

    // 表单查询
    const handleSearch = e => {
        e.preventDefault()
        form.validateFields((err, values) => {
            console.log('Received values of form: ', values)

        })
    }
    // 表单清空
    const handleReset = e => {
        form.resetFields();
    }
    // 查询条件
    const getFields = () => {
        return (
            <Col span={8}>
                <Form.Item label={`名称`}>
                    {getFieldDecorator(`id`, {})
                        (<Input />)}
                </Form.Item>
            </Col>
        )
    }
    // 按钮处理
    const handleBtn = type => {

    }

    const pagination = {
        total: parseInt(total),
        onChange(page) {
            getStoreTypeLists(page)
        }
    }
    // 获取门店分类
    const getStoreTypeLists = async (pageNo) => {
        let params = {
            pageNo,
            pageSize
        }
        let res = await getStoreTypeList()
        if (res.code === '0') {
            setTypeList(res.data)
            setTotal(res.iTotalDisplayRecords)
        } else {
            alert(res.msg)
        }
    }
    return (
        <PageHeaderWrapper>
            <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
            <RenderButtom click={handleBtn} />
            <Table
                columns={columns}
                dataSource={typeList}
                rowKey={record => record.id}
                pagination={pagination}
            />
   </PageHeaderWrapper>
    )
}

export default Form.create()(StoreType)
